<template>
  <view class="set-page">
    <!-- 顶部导航 -->
    <view class="status-bar" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
      <view class="nav-bar">
        <view class="nav-bar-left">
          <image src="/static/left_arrow.png" class="nav-back-icon" @click="goBack" />
        </view>
        <view class="nav-bar-title">设置</view>
        <view class="nav-bar-right"></view>
      </view>
    </view>
    <view class="status-height-color" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
    </view>

    <!-- 卡片区域 -->
    <view class="set-card">
      <view v-for="(item, index) in setList" :key="index" class="set-item" @click="tn(item.url)"
        :class="{ 'no-border': index === setList.length - 1 }">
        <text class="set-item-title">{{ item.title }}</text>
        <image class="set-item-arrow" src="/static/arrow_icon222.png" />
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn-wrap">
      <button class="logout-btn" @click="startLogout">退出登录</button>
    </view>
    <!-- 注销 -->
    <view class="logout-btn-wrap">
      <button class="logout-btn" @click="showLogoutDialog = true">注销账号</button>
    </view>

    <view v-if="showLogoutDialog" class="exit-dialog-mask">
      <view class="exit-dialog-box">
        <view class="exit-dialog-title">确定要注销账号吗？</view>
        <view class="exit-dialog-actions">
          <view class="exit-dialog-btn" @click="showLogoutDialog = false">取消</view>
          <view class="exit-dialog-divider"></view>
          <view class="exit-dialog-btn exit-dialog-btn-danger" @click="confirmExit">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'TemplateSet',
  mixins: [template_page_mixin],
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      // setList: [
      //   {
      //     title: "功能反馈",
      //     url: "/minePages/protocol",
      //   },
      //   {
      //     title: "用户协议",
      //     url: "/minePages/content?type=agreement",
      //   },
      //   {
      //     title: "隐私政策",
      //     url: "/minePages/content?type=privacy",
      //   },
      //   {
      //     title: "帮助中心",
      //     url: "/minePages/help",
      //   },
      //   {
      //     title: "版权所属",
      //     url: "/minePages/version",
      //   }
      // ],
      setList: [
        {
          title: "用户协议",
          url: "/minePages/content?type=agreement",
        },
        {
          title: "隐私政策",
          url: "/minePages/content?type=privacy",
        },
      ],
      showLogoutDialog: false
    }
  },
  onLoad() {
    let { statusBarHeight, system } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    tn(url) {
      try {
        uni.navigateTo({
          url,
        });
      } catch (e) {
        console.error(e);
        uni.showToast({
          title: "跳转失败",
          icon: "none",
          mask: true,
        });
      }
    },
    // 退出登录
    startLogout() {
      // 显示加载提示
      uni.showLoading({
        title: '正在退出...',
        mask: true
      });
      // 直接清除本地缓存
      const storageKeys = ["userInfo"];
      storageKeys.forEach(key => uni.removeStorageSync(key));
      uni.hideLoading();
      // 跳转到登录页
      uni.reLaunch({
        url: '/minePages/login'
      });
    },
    // 注销账号
    confirmExit() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo || !userInfo.userid) {
        uni.showToast({ title: '用户信息缺失', icon: 'none' });
        this.showLogoutDialog = false;
        return;
      }
      const formData = { userid: userInfo.userid };
      const LOGOUT_API = '/bot/api/agentcsetLogout';

      this.$Request.postApi(LOGOUT_API, formData)
        .then(res => {
          if (res.error === 0) {
            // 统一清除用户信息
            const storageKeys = ['userInfo'];
            storageKeys.forEach(key => uni.removeStorageSync(key));

            uni.showToast({ title: '注销成功', icon: 'none' });
            setTimeout(() => {
              uni.reLaunch({ url: '/minePages/login' });
            }, 1000);
          } else {
            uni.showModal({
              showCancel: false,
              title: '注销失败',
              content: res.message
            });
          }

          this.showLogoutDialog = false;
        })
        .catch(err => {
          uni.showToast({ title: '网络异常，请稍后再试', icon: 'none' });
          console.error('注销请求失败:', err);
          this.showLogoutDialog = false;
        });
    },
  }
}
</script>

<style lang="scss" scoped>
.set-page {
  min-height: 100vh;
  background: #100D05;
  padding: 0 32rpx;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #100D05;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    width: 100%;

    .nav-bar-left {
      display: flex;
      align-items: center;
      margin-left: 32rpx; // 距离左侧

      .nav-back-icon {
        width: 46.15rpx;
        height: 46.15rpx;
      }
    }

    .nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 35rpx;
      font-weight: 500;
    }

    .nav-bar-right {
      width: 60rpx; // 右侧占位
    }
  }
}

.status-height-color {
  width: 100%;
  background: #100D05;
}

.set-card {
  background: #181613;
  border-radius: 20rpx;
  margin: 30rpx 0 0 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  padding: 0;
}

.set-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 60rpx 32rpx;

  .set-item-title {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    font-size: 27rpx;
  }

  .set-item-arrow {
    width: 31.14rpx;
    height: 30.77rpx;
  }
}

.set-item.no-border {
  border-bottom: none;
}

.logout-btn-wrap {
  margin-top: 40rpx;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 90rpx;
  background: #1A1917;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 16rpx;
  font-size: 27rpx;
  font-weight: 400;
  border: none;
}

.exit-dialog-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-dialog-box {
  width: 520rpx;
  background: #23232B;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.18);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.exit-dialog-title {
  color: #fff;
  font-size: 31rpx;
  font-weight: 600;
  text-align: center;
  padding: 56rpx 0 48rpx 0;
}

.exit-dialog-actions {
  display: flex;
  flex-direction: row;
  border-top: 4rpx solid #393A40;
  height: 96rpx;
}

.exit-dialog-btn {
  flex: 1;
  color: #fff;
  font-size: 27rpx;
  font-weight: 500;
  text-align: center;
  line-height: 96rpx;
  cursor: pointer;
}

.exit-dialog-btn-danger {
  color: #5E6AB5;
}

.exit-dialog-divider {
  width: 4rpx;
  background: #393A40;
  height: 100%;
}
</style>
